<template>
	<view class="cu-item shadow">
		<view class="cu-list menu-avatar item" :class="nth % 4 === 1 ? 'blue': nth % 4 === 2 ?'yellow': nth % 4 === 3 ?'purpose': 'orange'">
			<view class="project-title padding-left-lg">{{ cardInfo.project_name }}</view>
			<view class="image padding-left-lg padding-left-right-lg">
				<image :src="formatImg(cardInfo.thumb)" mode="widthFix"></image>
			</view>
			<view class="cu-item align-center">
				<view class="flex-sub">
					<view class="company">
						<text class="label">支持金额（元）：</text>
						<span class="text-orange text-lg">{{ cardInfo.money }}</span>
					</view>
					<view class="company">
						<text class="label">进度：</text>
						<span>{{ cardInfo.percent }}</span>
					</view>
					<view class="flex timer">
						<text class="label">支持时间</text>
						{{ cardInfo.time }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "index",
		props: {
			cardInfo: {
				type: Object
			},
			nth: {
				type: Number
			}
		},
		data() {
			let that = this;
			return {
				imgUrl: that.$mConfig.assetsPath,
			};
		},
		methods: {
			formatStatus(status) {
				console.log(status)
				switch (status) {
					case 1:
						return "已认证";
					case 0:
						return "未认证";
				}
			},
			formatImg(thumb) {
				return this.imgUrl + thumb;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.item {
		background: linear-gradient(90deg, rgba(255, 92, 156, 1), rgba(255, 166, 106, 1));
		box-shadow: 0rpx 4rpx 36rpx 0rpx rgba(206, 206, 206, 0.48);
		border-radius: 10rpx;
		margin: 0 30rpx;
		overflow: hidden;
	}

	.cu-list.menu-avatar>.cu-item {
		// background: url('https://test.hrycf.com/hryxcx/myproject1.png') no-repeat top;
		// background-size: 100%100%;
		background-color: transparent;
	}

	.timer {
		font-size: 22rpx;
		font-family: PingFang SC;
		text-align: center;
		line-height: 50rpx;
	}

	.project-title {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		margin: 29rpx 0;
	}

	.company {
		font-size: 22rpx;
		font-family: PingFang SC;

		.label {

			font-family: PingFang SC;
			font-weight: normal;
		}
	}

	.image image {
		width: 100% !important;
		border-radius: 8rpx;
		margin: 0 !important;
	}

	.image {
		margin: 0 30rpx 0 0 !important;
	}

	.yellow {
		background: linear-gradient(90deg, rgba(255, 247, 226, 1), rgba(255, 240, 193, 1));
		box-shadow: 0px 8px 27px 0px rgba(255, 245, 215, 0.78);
		color: rgba(155, 107, 33, 1) !important;

		.timer {
			color: rgba(154, 153, 153, 1);
		}
	}

	.orange {
		background: linear-gradient(90deg, rgba(251, 238, 221, 1), rgba(251, 229, 218, 1));
		box-shadow: 0px 8px 27px 0px rgba(251, 229, 218, 0.78);
		color: rgba(147, 69, 43, 1) !important;

		.timer {
			color: rgba(154, 153, 153, 1);
		}
	}

	.purpose {
		background: linear-gradient(90deg, rgba(246, 228, 240, 1), rgba(235, 225, 252, 1));
		box-shadow: 0px 8px 27px 0px rgba(239, 226, 248, 0.78);
		color: rgba(90, 72, 112, 1) !important;

		.timer {
			color: rgba(154, 153, 153, 1);
		}
	}

	.blue {
		background: linear-gradient(90deg, rgba(217, 236, 255, 1), rgba(217, 220, 254, 1));
		box-shadow: 0px 8px 27px 0px rgba(244, 230, 246, 0.78);
		color: rgba(56, 83, 139, 1) !important;

		.timer {
			color: rgba(141, 155, 180, 1);
		}
	}
</style>
